<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>惠农通 - 系统设置</title>
    <link rel="icon" href="./assets/logo.ico" type="images/x-ico" />
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 系统设置页面特定样式 */
        .settings-container {
            padding: 20px;
            max-width: 1000px;
            margin: 0 auto;
        }
        
        .settings-card {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            padding: 25px;
            margin-bottom: 20px;
        }
        
        .settings-card-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
        
        .settings-card-title i {
            margin-right: 10px;
            color: #4CAF50;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #555;
        }
        
        .form-control {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: border-color 0.3s;
        }
        
        .form-control:focus {
            border-color: #4CAF50;
            outline: none;
        }
        
        .form-row {
            display: flex;
            gap: 20px;
        }
        
        .form-row .form-group {
            flex: 1;
        }
        
        .time-display {
            font-size: 24px;
            font-weight: 600;
            color: #4CAF50;
            text-align: center;
            padding: 20px;
            background-color: #f5f5f5;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .time-display span {
            display: inline-block;
            min-width: 30px;
            text-align: center;
        }
        
        .settings-actions {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            margin-top: 20px;
        }
        
        /* 开关样式 */
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .slider {
            background-color: #4CAF50;
        }
        
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .form-row {
                flex-direction: column;
                gap: 0;
            }
        }

            /* 新增夜间模式变量 */
    :root {
        --primary-bg: #ffffff;
        --primary-text: #333333;
        --card-bg: #ffffff;
        --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        --switch-bg: #ccc;
        --switch-checked-bg: #4CAF50;
    }
 
    .night-mode {
        --primary-bg: #1a1a1a;
        --primary-text: #ffffff;
        --card-bg: #2d2d2d;
        --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
        --switch-bg: #4a4a4a;
        --switch-checked-bg: #6ab04c;
    }

    body {
        background-color: var(--primary-bg);
        color: var(--primary-text);
    }
    .settings-card {
        background-color: var(--card-bg);
        box-shadow: var(--card-shadow);
    }
    input:checked + .slider {
        background-color: var(--switch-checked-bg);
    }
 
    .time-display {
        background-color: var(--card-bg);
    }
    
        
    </style>
</head>
<body>
<div class="admin-container">
    <!-- 侧边栏 - 与项目其他页面保持一致 -->
    <aside class="sidebar">
        <div class="sidebar-header">
            <div class="logo">
                <img src="assets/logo.png" alt="惠农通">
                <h2>惠农通</h2>
            </div>
        </div>
        <nav class="sidebar-menu">
            <ul>
                <li data-page="dashboard">
                    <i class="fas fa-chart-line"></i>
                    <span>数据概览</span>
                </li>
                <li data-page="employees">
                    <i class="fas fa-users"></i>
                    <span>员工管理</span>
                </li>
                <li  data-page="expert">
                    <i class="fas fa-user-tie"></i>
                    <span>专家管理</span>
                </li>
                <li data-page="farm-management">
                    <i class="fas fa-warehouse"></i>
                    <span>农场管理</span>
                </li>
                <li data-page="products">
                    <i class="fas fa-box-open"></i>
                    <span>产品管理</span>
                </li>
                <li data-page="order">
                    <i class="fas fa-shopping-cart"></i>
                    <span>订单管理</span>
                </li>
                <li class="active" data-page="ai-chat">
                    <i class="fas fa-robot"></i>
                    <span>AI问答</span>
                </li>
                <li data-page="activities">
                    <i class="fas fa-tractor"></i>
                    <span>农业活动</span>
                </li>
                <li class="active" data-page="settings">
                    <i class="fas fa-cog"></i>
                    <span>系统设置</span>
                </li>
            </ul>
        </nav>
        <div class="sidebar-footer">
            <button class="logout-btn" id="logoutBtn">
                <i class="fas fa-sign-out-alt"></i>
                <span>退出登录</span>
            </button>
        </div>
    </aside>

    <!-- 主内容区 -->
    <main class="main-content">
        <header class="main-header">
            <h1 id="pageTitle">系统设置</h1>
            <div class="user-info">
                <span class="welcome">欢迎，<span id="currentUser">管理员</span></span>
                <div class="avatar">
                    <i class="fas fa-user-circle"></i>
                </div>
            </div>
        </header>

        <!-- 系统设置页面内容 -->
        <div class="page-content">
            <div class="settings-container">
                <!-- 当前时间显示 -->
                <div class="time-display">
                    <span id="currentYear">2025</span>年
                    <span id="currentMonth">4</span>月
                    <span id="currentDay">4</span>日
                    <span id="currentWeek">星期五</span>
                    <span id="currentHour">14</span>:
                    <span id="currentMinute">30</span>:
                    <span id="currentSecond">45</span>
                </div>
                
                <!-- 系统设置卡片 -->
                <div class="settings-card">
                    <h3 class="settings-card-title">
                        <i class="fas fa-user-shield"></i> 账户安全设置
                    </h3>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="password">修改密码</label>
                            <input type="password" id="password" class="form-control" placeholder="输入新密码">
                        </div>
                        <div class="form-group">
                            <label for="confirmPassword">确认密码</label>
                            <input type="password" id="confirmPassword" class="form-control" placeholder="再次输入新密码">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="securityQuestion">安全问题</label>
                        <select id="securityQuestion" class="form-control">
                            <option value="">选择安全问题</option>
                            <option value="1">您的出生地是哪里？</option>
                            <option value="2">您的第一所学校的名称？</option>
                            <option value="3">您的宠物的名字是什么？</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="securityAnswer">安全问题答案</label>
                        <input type="text" id="securityAnswer" class="form-control" placeholder="输入安全问题答案">
                    </div>
                    
                    <div class="settings-actions">
                        <button class="secondary-btn">
                            <i class="fas fa-times"></i> 取消
                        </button>
                        <button class="primary-btn">
                            <i class="fas fa-save"></i> 保存设置
                        </button>
                    </div>
                </div>
                
                <!-- 系统偏好设置 -->
                <div class="settings-card">
                    <h3 class="settings-card-title">
                        <i class="fas fa-sliders-h"></i> 系统偏好设置
                    </h3>
                    
                    <div class="form-group">
                        <label style="display: flex; justify-content: space-between; align-items: center;">
                            <span>夜间模式</span>
                            <label class="switch">
                                <input type="checkbox">
                                <span class="slider"></span>
                            </label>
                        </label>
                    </div>
                    
                    <div class="form-group">
                        <label style="display: flex; justify-content: space-between; align-items: center;">
                            <span>消息通知</span>
                            <label class="switch">
                                <input type="checkbox" checked>
                                <span class="slider"></span>
                            </label>
                        </label>
                    </div>
                    
                    <div class="form-group">
                        <label style="display: flex; justify-content: space-between; align-items: center;">
                            <span>数据自动备份</span>
                            <label class="switch">
                                <input type="checkbox" checked>
                                <span class="slider"></span>
                            </label>
                        </label>
                    </div>
                    
                    <div class="form-group">
                        <label for="language">系统语言</label>
                        <select id="language" class="form-control">
                            <option value="zh-CN" selected>简体中文</option>
                            <option value="en-US">English</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="themeColor">主题颜色</label>
                        <select id="themeColor" class="form-control">
                            <option value="green" selected>绿色</option>
                            <option value="blue">蓝色</option>
                            <option value="red">红色</option>
                            <option value="purple">紫色</option>
                        </select>
                    </div>
                    
                    <div class="settings-actions">
                        <button class="secondary-btn">
                            <i class="fas fa-times"></i> 取消
                        </button>
                        <button class="primary-btn">
                            <i class="fas fa-save"></i> 保存设置
                        </button>
                    </div>
                </div>
                
                <!-- 系统信息 -->
                <div class="settings-card">
                    <h3 class="settings-card-title">
                        <i class="fas fa-info-circle"></i> 系统信息
                    </h3>
                    
                    <div class="form-group">
                        <label>系统版本</label>
                        <div class="form-control" style="background-color: #f5f5f5;">惠农通管理系统 v2.1.0</div>
                    </div>
                    
                    <div class="form-group">
                        <label>最后更新时间</label>
                        <div class="form-control" style="background-color: #f5f5f5;">2025-4-4 10:24:00</div>
                    </div>
                    
                    <div class="form-group">
                        <label>数据库版本</label>
                        <div class="form-control" style="background-color: #f5f5f5;">MySQL 8.0.32</div>
                    </div>
                    
                    <div class="settings-actions">
                        <button class="secondary-btn">
                            <i class="fas fa-sync-alt"></i> 检查更新
                        </button>
                        <button class="primary-btn">
                            <i class="fas fa-download"></i> 立即更新
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

<script>
    // 基础URL配置
    const BASE_URL = 'http://localhost:8080';
    
    document.addEventListener('DOMContentLoaded', function() {
        // 设置当前活动菜单项
        function setActiveMenuItem() {
            const currentPage = 'settings'; // 当前页面标识
            
            document.querySelectorAll('.sidebar-menu li').forEach(item => {
                item.classList.remove('active');
                if (item.getAttribute('data-page') === currentPage) {
                    item.classList.add('active');
                }
            });
        }
        
        // 页面跳转函数
        function navigateToPage(page) {
            if (page === 'dashboard') {
                window.location.href = 'dashboard.html';
            } else if (page === 'employees') {
                window.location.href = 'employees.html';
            } else if (page === 'products') {
                window.location.href = 'product.html';
            } else if (page === 'activities') {
                window.location.href = 'activities.html';
            } else if (page === 'settings') {
                window.location.href = 'settings.html';
            }else if (page === 'ai-chat') {
                window.location.href = 'ai-chat.html';
            }else if (page === 'expert') {
                window.location.href = 'expert.html';
            }else if(page === 'order'){
                window.location.href = 'order.html';
            }else if(page === 'farm-management'){
                window.location.href = 'farm.html';
            }
        }
        
        // 更新当前时间
        function updateCurrentTime() {
            const now = new Date();
            const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            
            document.getElementById('currentYear').textContent = now.getFullYear();
            document.getElementById('currentMonth').textContent = String(now.getMonth() + 1).padStart(2, '0');
            document.getElementById('currentDay').textContent = String(now.getDate()).padStart(2, '0');
            document.getElementById('currentWeek').textContent = weekDays[now.getDay()];
            document.getElementById('currentHour').textContent = String(now.getHours()).padStart(2, '0');
            document.getElementById('currentMinute').textContent = String(now.getMinutes()).padStart(2, '0');
            document.getElementById('currentSecond').textContent = String(now.getSeconds()).padStart(2, '0');
        }
        
        // 初始化页面
        function initPage() {
            setActiveMenuItem();
            
            // 添加菜单点击事件
            document.querySelectorAll('.sidebar-menu li').forEach(item => {
                item.addEventListener('click', function() {
                    const page = this.getAttribute('data-page');
                    navigateToPage(page);
                });
            });
            
            // 初始化时间显示
            updateCurrentTime();
            setInterval(updateCurrentTime, 1000);
            
            // 这里可以添加其他设置页面特定的初始化代码
        }
        
        // 初始化页面
        initPage();
    });

        // 新增夜间模式控制函数
        function toggleNightMode(isChecked) {
        document.documentElement.classList.toggle('night-mode', isChecked);
        localStorage.setItem('nightMode', isChecked);
    }
 
    // 初始化夜间模式状态
    document.addEventListener('DOMContentLoaded', function() {
        const nightModeSwitch = document.querySelector('input[type="checkbox"]');
        const savedMode = localStorage.getItem('nightMode') === 'true';
        
        // 应用保存的模式
        toggleNightMode(savedMode);
        nightModeSwitch.checked = savedMode;
 
        // 添加切换事件监听
        nightModeSwitch.addEventListener('change', function(e) {
            toggleNightMode(e.target.checked);
        });
    });
</script>
</body>
</html>